<html>
<html lang="en">
<head>
    <title>登录页面</title>
    <meta charset="UTF-8">
    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">

        #head {
            font-family: 隶书;
            font-size: 60px;
        }

        #center {

            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            height: auto;
        }

        #main {
            background-color: floralwhite;
            max-width: 400px;
            padding-left: 50px;
            padding-top: 40px;
            padding-bottom: 40px;

            border: 1px solid #a0a0a0;
            border-radius: 10px;

        }

        html {
            overflow-x: hidden;
            overflow-y: auto;
        }

        body {
            background-image: url("images/登录页面.jpg");
            background-repeat: no-repeat; /*设置图片不重复*/
            background-size: cover; /*设置图片平铺*/
        }

        button {
            margin-right: 20px;
        }

    </style>
</head>
<body>
<script>

    $(function () {
        $("#login").click(function () {
            $.ajax({
                url: "user/login",
                type: "post",
                data: $("#main").serialize(),
                success: function (data) {
                    var Data = data.map;

                    if (data.code == 100) {
                        //获取msg中map的value值
                        for (var key in Data) {

                            if (Data[key] == 1 || Data[key] == 2 || Data[key] == 3) {
                                location.href = "http://localhost:8080/cinema/pages/manager/manager.html"
                            } else {
                                location.href = "http://localhost:8080/cinema/pages/playView.html";
                            }
                        }
                    } else {
                        $("#login_span").html('<font color="red">' + data.msg + '</font>')
                    }
                },
                dataType: "json"
            })
        })


        $("#register").click(function () {
            // reset_form("#user_add_Modal form");
            //弹出模态框
            $("#user_add_Modal").modal({
                backdrop: "static"
            });

            $("#userName_add_input").blur(checkusername);
            $("#userPassword_add_input").blur(checkuserPwd);
            // $("#userPassword_check_input").blur(checkuserPwdagin);
            $("#userEmail_add_input").blur(checkuserEmail);
        });
    })

    function checkusername() {
        //    获取值
        var userNameVal = $("#userName_add_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userNameVal)
        if (flag) {
            //    通过校验
            $("#userName_add_input").css("border", "")
        } else {
            $("#userName_add_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }

    function checkuserPwd() {
        //    获取值
        var userPwdVal = $("#userPassword_add_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userPwdVal)
        if (flag) {
            //    通过校验
            $("#userPassword_add_input").css("border", "")
        } else {
            $("#userPassword_add_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }

    // function checkuserPwdagin() {
    //     //    获取值
    //     var userPwdValagin = $("#userPassword_check_input").val();
    //     //	定义正则
    //     var reg = /^\w{6,12}$/;
    //     //	匹配,返回值
    //     var flag = reg.test(userPwdValagin)
    //     if (flag) {
    //         //    通过校验
    //         $("#userPassword_check_input").css("border", "")
    //     } else {
    //         $("#userPassword_check_input").css("border", "1px red solid")
    //     }
    //     //	返回值
    //     return flag;
    // }
    function checkuserEmail() {
        //    获取值
        var userEmail = $("#userEmail_add_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userEmail)
        if (flag) {
            //    通过校验
            $("#userEmail_add_input").css("border", "")
        } else {
            $("#userEmail_add_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }

    $(function () {
        // $("#user_save_btn").click(function () {
        //    alert("111")
        $("#input_User").submit(function () {
            if (checkusername() && checkuserPwd() && checkuserEmail()) {
                $.ajax({
                    url: "user/register",
                    type: "post",
                    data: $(this).serialize(),
                    success: function (data) {
                        if (data.code==100) {
                            location.href = "index.html"

                        } else {
                            $("#error_Msg").html('<font color="red">' + data.msg + '</font>');
                        }
                    }, dataType: "json"
                })
            }
            return false;
        })
    })
    // })
</script>


<!--页面主体-->
<div class="container-fluid">
    <div class="row " id="title">
        <div class="col-md-7 col-md-offset-3" id="head">
            <span>欢 迎 光 临 T T M S 影 院</span>
        </div>
    </div>
    <div class="center col-md-4 col-md-offset-4" id="center">
        <span id="login_span"></span>
        <form class="form-horizontal" id="main">
            <div class="form-group">
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="userName" name="userName" placeholder="用户名">
                    <span class="help-block"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="userPwd" name="userPassword" placeholder="密码">
                    <span class="help-block"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-10">
                    <button type="button" class="btn btn-success" id="login">登录</button>
                    <button type="button" class="btn btn-info" id="register">注册</button>
                </div>
            </div>

        </form>
    </div>
</div>

<!--注册的模态框-->
<!-- Modal -->
<div class="modal fade" id="user_add_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">注册</h4>
            </div>
            <div class="modal-body">
                <span id="error_Msg"></span>
                <form class="form-horizontal" id="input_User">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userName_add_input" placeholder="3-16位中文,英文或数字"
                                   name="userName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="userPassword_add_input"
                                   placeholder="6-16位，必须包含英文和数字" name="userPassword">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                    <!--<label class="col-sm-2 control-label">确认密码</label>-->
                    <!--<div class="col-sm-10">-->
                    <!--<input type="password" class="form-control" id="userPassword_check_input" placeholder="6-16位，必须包含英文和数字" >-->
                    <!--<span class="help-block"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userEmail_add_input" placeholder="xxx@xx.com"
                                   name="userEmail">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="user_save_btn">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>